<script setup lang="ts">
const musicStore = useMusicStore()

const currentMusicList = computed(() => musicStore.currentMusicList);

const menuVisible = defineModel();

const emit = defineEmits(['change']);

function playMusic(music: AudiopalyRecord) {
  menuVisible.value = false;
  emit('change', music)
}

</script>

<template>
  <view class="current-list-mask" :class="{'current-list-mask-show': menuVisible}">
    <view class="current-list" >
      <view class="current-list-title">
        <view class="title-left">
          播放列表
        </view>
        <view class="title-right" @click="menuVisible = false">
          <uni-icons type="close" size="24" color="#fff" />
        </view>

      </view>

      <view class="music-list">
        <view
            v-for="(music, index) in currentMusicList"
            :key="index"
            class="music-item"
            :class="{'music-item-active': music.path == musicStore.currentMusic.path}"
            @click="playMusic(music)"
        >
          <view class="music-img">
            <image src="/static/image/audiopaly/music-a.png" mode="aspectFit"></image>
          </view>
          <view class="music-info">
            <text class="music-name">{{ music.musicName }}</text>
            <text class="music-author">{{ music.author || '未知' }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.current-list-mask {
  position: fixed;
  width: 100%;
  height: 0;
  left: 0;
  bottom: 0;
  z-index: 999;
  transition: all 0.3s;
  overflow: hidden;

  .current-list {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1000rpx;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20rpx 20rpx 0 0;


    .current-list-title {
      padding: 40rpx 40rpx 0;
      //text-align: center;
      font-weight: bold;
      font-size: 20px;
      color: $uni-white;
      display: flex;

      .title-left {
        flex: 1;
      }
    }

    .music-list {
      width: calc(100% - 80rpx);
      padding: 20rpx 40rpx;
      overflow-y: auto;
      height: calc(100% - 140rpx);
      overscroll-behavior: contain;

      .music-item {
        padding: 20rpx;
        border-bottom: 2rpx solid $uni-border-1;
        display: flex;
        align-items: center;

        .music-img {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }

        .music-info {
          flex: 1;
        }

        &:last-child {
          border-bottom: none;
        }

        .music-name {
          font-size: 16px;
          color: $uni-white;
          margin-right: 20rpx;
        }

        .music-author {
          font-size: 14px;
          color: $uni-extra-color;
        }
      }

      .music-item-active {

        .music-name {
          color: $uni-primary;
        }

        .music-author {
          color: $uni-primary;
        }
      }
    }
  }
}

.current-list-mask-show{
  height: 100%;
}
</style>